<template>
	<div class="menulist">
		<ul class="menu">
			<li v-for="(tab,index) in tabList" :key="index">
				<a href="#" :class="{active: tab.isChoice}">
					<span :class="tab.icon" class="glyphicon" aria-hidden="true"></span>
					<span class="text">{{tab.title}}</span>
				</a>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tabList: [
				{
					title: "首页",
					icon: "glyphicon-home",
					isChoice: true
				},
				{
					title: "手册",
					icon: "glyphicon-book",
					isChoice: false
				},
				{
					title: "博客",
					icon: "glyphicon-edit",
					isChoice: false
				},
				{
					title: "视频",
					icon: "glyphicon-film",
					isChoice: false
				},
				{
					title: "我的",
					icon: "glyphicon-user",
					isChoice: false
				}
			]
		};
	}
};
</script>

<style scoped>
.active {
	color: #00ccff !important;
	display: flex;
	text-decoration: none;
	font-size: 0.26rem;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
}

.menulist {
	width: 100%;
	height: 0.98rem;
	position: fixed;
	z-index: 999999999999999999999;
	bottom: 0;
	background-color: #f0f0f0;
}

.menulist .menu {
	display: flex;
	padding: 0px !important;
	margin: 0px !important;
	height: 100%;
	justify-content: space-around;
	align-content: center;
}

.menu li {
	list-style: none;
	flex: 1;
}

.menu li a {
	color: black;
	text-decoration: none;
	font-size: 0.26rem;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
}

.menu li .glyphicon {
	font-size: 0.38rem;
	align-self: center;
}

.menu li .text {
	align-self: center;
	margin-top: 0.06rem;
}
</style>